<template>
  <c-select
    v-bind="$attrs"
    v-on="$listeners"
    filterable
    :value="value"
    :options="creditOrg"
    @change="hangleChange"
    :props="props"
  ></c-select>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
    productId: {
      type: String,
      default: '',
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  data() {
    return {
      props: {
        value: 'agency_id',
        label: 'agency_name',
      },
      creditOrg: [],
    }
  },
  computed: {
    ...mapGetters(['user']),
  },
  watch: {
    productId: {
      handler: function () {
        this.getData()
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData() {
      const { queryAddressCode } = this.user
      this.$api
        .getData({
          table: 'industrial_package_agency_view',
          params: {
            'agency_type.eq': 1,
            // fields: ['agency_id', 'agency_name'],
            groupFields: 'agency_id',
            address_code: queryAddressCode,
            industrial_package_id: this.productId,
          },
          order: {
            create_time: 'desc',
          },
        })
        .then(res => {
          this.creditOrg = (res && res.data) || []
        })
    },
    hangleChange(val) {
      const select = this.creditOrg.find(item => item.agency_id === val) || {}
      this.$emit('change', val)
      this.$emit('select', select)
    },
  },
}
</script>

<style lang="scss" scoped></style>
